<template>
    <p>侦听器</p>
    <p>{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
</template>
<script>
export default {
    data() {
        return {
            message: 'Hello Vue!'
        }
    },
    methods: {
        changeMessage() {
            this.message = 'sfaf';
        }
    },
    //侦听器
    watch:{
        //函数名必须与侦听的数据对象（上面定义的message）保持一致
        //newValue 改变之后的数据
        //oldValue 改变之前的数据
        message(newValue,oldValue){
            console.log(newValue, oldValue);
        }
    }
}

</script>
<style type="text/css">
</style>